<template>
  <div class="echarts">
    <div :style="{ height: '84.445vh', width: '100%' }" ref="myEchart"></div>
    <div class="title">平台项目资源分布</div>
    <div class="visualMap">
      <span class="item"><span>0</span></span>
      <span class="item"><span>100</span></span>
      <span class="item"><span>500</span></span>
      <span class="item"><span>1000</span></span>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
import "echarts/map/js/world.js"; // 引入中国地图数据
import { reqProvinceData } from "../request/api";
import geoCoord from "../static/js/geoCoord";
//当前视口宽度
let nowClientWidth = document.documentElement.clientWidth;

export default {
  props: ["renderData"],
  data() {
    return {
      chartData: null,
      chart: null,
      points: [],
      provinceData: null,
      saveData: 1,
    };
  },
  created() {
    this.getProjectNum();
    setInterval(() => {
      this.getProjectNum();
    }, 10000);
  },
  mounted() {},
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    // 换算方法
    nowSize(val,initWidth=1920){
        return val * (nowClientWidth/initWidth);
     },
    //按省份统计项目及咨询数量返回
    getProjectNum() {
      reqProvinceData().then((res) => {
        if (res.data.ret) {
          if (this.saveData.toString() !== res.data.data.toString()) {
            let arr = [];
            let pointData = [];
            let chartData = res.data.data;
            this.saveData = res.data.data;
            let provinceData = [];
            let SDNum = 0;
            let filterData = chartData.filter((item)=>{
              if (item.province === "山东省"){
                SDNum = item.num;
              }
              return item.province !== "山东省"
            })

            filterData.map((item) => {
              console.log('遍历的数据',item)
              pointData.push({
                value: [...geoCoord[item.province], ...[item.num]],
                itemStyle: { color: "#053ABB" },
              });
              if (item.num > 1000) {

                arr.push({
                  coords: [geoCoord[item.province], [116.75199, 36.55358]],
                  lineStyle: { color: "#fbe1d6" },
                });
                provinceData.push({
                  name: this.filterName(item.province),
                  value: item.num,
                  cityCode: item.province_id,
                  itemStyle: {
                    normal: {
                      color: "#9613FE",
                    },
                  },
                  label: {
                    normal: {
                      show: true,
                      textStyle: {
                        color: "#fff",
                      },
                    },
                  },
                  fontSize:this.nowSize(14)
                });
              } else if (item.num > 500) {
                arr.push({
                  coords: [geoCoord[item.province], [116.75199, 36.55358]],
                  lineStyle: { color: "#fbe1d6" },
                });
                provinceData.push({
                  name: this.filterName(item.province),
                  value: item.num,
                  cityCode: item.province_id,
                  itemStyle: {
                    normal: {
                      color: "#5A26FF",
                    },
                  },
                  label: {
                    normal: {
                      show: true,
                      textStyle: {
                        color: "#fff",
                      },
                      fontSize:this.nowSize(14)
                    },
                  },
                });
              } else if (item.num > 100) {
                arr.push({
                  coords: [geoCoord[item.province], [116.75199, 36.55358]],
                  lineStyle: { color: "#fbe1d6" },
                });
                provinceData.push({
                  name: this.filterName(item.province),
                  value: item.num,
                  cityCode: item.province_id,
                  itemStyle: {
                    normal: {
                      color: "#0234BB",
                    },
                  },
                  label: {
                    normal: {
                      show: true,
                      textStyle: {
                        color: "#fff",
                      },
                      fontSize:this.nowSize(14)
                    },
                  },
                });
              } else {
                arr.push({
                  coords: [geoCoord[item.province], [116.75199, 36.55358]],
                  lineStyle: { color: "#fbe1d6" },
                });
                provinceData.push({
                  name: this.filterName(item.province),
                  value: item.num,
                  cityCode: item.province_id,
                  itemStyle: {
                    normal: {
                      color: "#00207F",
                    },
                  },
                  label: {
                    normal: {
                      show: true,
                      textStyle: {
                        color: "#fff",
                      },
                      fontSize:this.nowSize(14)
                    },
                  },
                });
              }
            });
           //单独添加山东省地图颜色
            provinceData.push({
              name: this.filterName('山东省'),
              value: SDNum,
              cityCode: 370000,
              itemStyle: {
                normal: {
                  color: "#32C5FF",
                },
              },
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: "#fff",
                  },
                  fontSize:this.nowSize(18)
                },
              },
            });
            this.provinceData = provinceData;
            this.chartData = arr;
            this.points = pointData;
            this.initEchartMap();
          }
        }
      });
    },
    //过滤省市自治区
    filterName(val) {
      let v = val;
      let str = v
        .replace(/省/, "")
        .replace(/市/, "")
        .replace(/自治区/, "")
        .replace(/回族/, "")
        .replace(/壮族/, "")
        .replace(/维吾尔/, "")
        .replace(/特别行政区/, "");
      return str;
    },
    //初始化e-charts
    initEchartMap() {
      //这里我们用固定的数据，真正使用时，用父组件传递来的数据替换series即可
      let myChart = echarts.init(this.$refs.myEchart);
      let that = this;
      const resize = () => {
        this.$emit('resizeWindow')
        myChart.resize();
      }
      window.onresize = resize;
      // window.onresize = myChart.resize;
      let option = {
        backgroundColor: "#011B3B",
        title: {
          top: 20,
          // text: "平台项目资源分布",
          subtext: "",
          x: "left",
          textStyle: {
            color: "#ccc",
          },
        },

        tooltip: {
          trigger: "item",
          formatter: function (params) {
            if(params.name !== ""){
              let peorjectNum = params.data?params.data.value:0;
              return `<div style="font-size: ${that.nowSize(19)}px;color: #ffffff; margin-bottom: ${that.nowSize(8)}px;padding-left: ${that.nowSize(4)}px;padding-top: ${that.nowSize(3)}px;" class="province-name">${params.name}</div>
                    <div style="font-size: ${that.nowSize(14)}px;line-height: ${that.nowSize(14)}px;color: #32C5FF;padding-left: ${that.nowSize(4)}px;padding-bottom: ${that.nowSize(3)}px;" class="project-num">项目数：${ peorjectNum}</div>`
            }
          },
        },
        boao: {
          zoom: 5,
        },
        // visualMap: {
        //   min: 0,
        //   max: 1000000,
        //   right: 20,
        //   seriesIndex: 1,
        //   type: "piecewise",
        //   bottom: 100,
        //   textStyle: {
        //     color: "#FFFF",
        //   },
        //   splitList: [
        //     {
        //       gt: 500,
        //       color: "#9613FE",
        //       label: "项目数大于1000",
        //     }, //大于1000
        //     {
        //       gte: 500,
        //       lte: 1000,
        //       color: "#5A26FF",
        //       label: "项目数500-1000",
        //     }, //项目数1000-500
        //     {
        //       gte: 100,
        //       lte: 500,
        //       color: "#0234BB",
        //       label: "项目数100-500",
        //     },
        //     {
        //       lte: 100,
        //       color: "#00207F",
        //       label: "项目数小于100",
        //     },
        //   ],
        // },
        geo: {
          map: "world",
          aspectScale: 0.75, //长宽比
          zoom: 3.5,
          roam: false,
          center:[105.20,28.86],
           itemStyle: {
              normal: {
                areaColor: "#031D43",
                borderColor: "#033C63",
                borderWidth: 1,
              },
              emphasis: {
                show: false,
                areaColor: null,
              },
            },
          regions: [
            {
              name: "南海诸岛",
              itemStyle: {
                areaColor: "rgba(0, 10, 52, 1)",

                borderColor: "rgba(0, 10, 52, 1)",
                normal: {
                  opacity: 0,
                  label: {
                    show: false,
                    color: "#009cc9",
                  },
                },
              },
            },
          ],
        },
        series: [
          {
            type: "map",
            roam: false,
            data: this.provinceData,
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: "#1DE9B6",
                },
              },
              emphasis: {
                textStyle: {
                  color: "rgb(183,185,14)",
                },
              },
            },

            itemStyle: {
              normal: {
                areaColor: "#031D43",
                borderColor: "#033C63",
                borderWidth: 1,
              },
              emphasis: {
                show: false,
                areaColor: null,
              },
            },
            zoom: 3.5,
            center:[105.20,28.86],
            //     roam: false,
            map: "world", //使用
            // // data: this.difficultData //热力图数据   不同区域 不同的底色
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            showEffectOn: "render",
            zlevel: 1,
            rippleEffect: {
              period: 15,
              scale: 0.2,
              brushType: "fill",
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                offset: [15, 0],
                color: "#1DE9B6",
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color:
                  "#1DE9B6" /* function (value){ //随机颜色
 return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
 }*/,
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
            symbolSize: 7,
            data: this.points,
          }, //地图线的动画效果
          {
            type: "lines",
            zlevel: 2,
            effect: {
              show: true,
              period: 4, //箭头指向速度，值越小速度越快
              trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: "arrow", //箭头图标
              symbolSize: 5, //图标大小
            },
            lineStyle: {
              normal: {
                color: "#1DE9B6",
                /* function (value){ //随机颜色

                ['#f21347','#f3243e','#f33736','#f34131','#f34e2b',
                '#f56321','#f56f1c','#f58414','#f58f0e','#f5a305',
                '#e7ab0b','#dfae10','#d5b314','#c1bb1f','#b9be23',
                '#a6c62c','#96cc34','#89d23b','#7ed741','#77d64c',
                '#71d162','#6bcc75','#65c78b','#5fc2a0','#5abead',
                '#52b9c7','#4fb6d2','#4ab2e5']
return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
}*/ width: 1, //线条宽度
                opacity: 0.1, //尾迹线条透明度
                curveness: 0.3, //尾迹线条曲直度
              },
            },
            data: this.chartData,
          },
        ],
      };
      myChart.setOption(option, true);
    },
  },
};
</script>
<style lang="less" scoped>
.province-name {

}
.project-num {

}
.echarts {
  position: relative;
  height: 54.445vh;
  .title {
    position: absolute;
    top: 2.778vw;
    left:24vw;
    background-image: -webkit-linear-gradient(
      top,
      rgba(255, 255, 255, 1),
      rgba(155, 204, 255, 1)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.311vw;
    font-weight: bold;
  }
  .visualMap {
    position: absolute;
    bottom: 0.694vw;
    right: 25vw;
    .item {
      width: 1.8vw;
      height: 0.356vw;
      display: inline-block;

      font-size: 0.556vw;
      position: relative;
      span{
        position:absolute;
        top:-1.0vw;
        color: rgba(255,255,255,.8);
      }
      &:nth-child(1){
        background: rgba(0, 32, 127, 1);
      }
      &:nth-child(2){
        background: rgba(2, 52, 187, 1);
      }
      &:nth-child(3){
        background:rgba(90, 38, 255, 1);
      }
      &:nth-child(4){
        background: rgba(150, 19, 254, 1);
      }
    }
  }
}
</style>